<template>
  <div class="nav-header layout-sb">
    <div class="left layout">
      <el-icon :size="30" color="#fff" @click="foldChange">
        <Expand v-if="isFold" />
        <Fold v-else />
      </el-icon>
      <myBreadcrumb :breadcrumbs="breadcrumbs" />
    </div>
    <div class="right">
      <el-dropdown>
        <span class="el-dropdown-link">
          用户信息
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>退出登录</el-dropdown-item>
            <el-dropdown-item divided>用户信息</el-dropdown-item>
            <el-dropdown-item>憨憨木</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts">
import myBreadcrumb, { IBreadcrumb } from "@/base-ui/breadcrumb"
import { defineComponent, ref, computed } from "vue"
import { pathMapBreadcrumbs } from "@/utils/map-menus"
import { useStore } from "@/store/index"
import { useRoute } from "vue-router"
export default defineComponent({
  emits: ["change"],
  components: { myBreadcrumb },
  setup(props, { emit }) {
    const isFold = ref(false)
    const foldChange = () => {
      isFold.value = !isFold.value
      emit("change", isFold.value)
    }

    // 面包屑数组 [{name:'',path:'}]
    const store = useStore()
    const breadcrumbs = computed(() => {
      const userMenus = store.state.login.userMenus
      const route = useRoute()
      const currentPath = route.path
      return pathMapBreadcrumbs(userMenus, currentPath)
    })

    return {
      isFold,
      foldChange,
      breadcrumbs
    }
  }
})
</script>

<style lang="less" scoped>
.nav-header {
  height: 100%;
  color: #fff;
  .el-dropdown {
    color: #fff;
  }
}
</style>
